<template>
  <div class='homeContent'>

	<a-row :gutter="16">
		<a-col class="gutter-row" :span="26">
          <a-row :gutter="16">
              <a-col class="gutter-row" :span="8">
                    <div class="card card-stats">
                        <div class="m-card-header  card-header-icon">
                          <div class="card-icon card-header-success ">
                            <a-icon type="database" />
                          </div>
                         <a-statistic title="数据总量" :value="totalData" />
                        </div>
                        <div class="card-footer">
                          <div class="stats">
                            {{totalDataNum}}条
                          </div>
                        </div>
                      </div>
              </a-col>
               <a-col class="gutter-row" :span="8">
                  <div class="card card-stats">
                    <div class="m-card-header  card-header-icon">
                      <div class="card-icon card-header-info ">
                        <a-icon type="file" />
                      </div>
                     <a-statistic title="生产资料数据" :value="productFile"  />
                    </div>
                    <div class="card-footer">
                      <div class="stats">
                        {{productFileNum}}条
                      </div>
                    </div>
                  </div>
              </a-col>
              <a-col class="gutter-row" :span="8">
                  <div class="card card-stats">
                    <div class="m-card-header  card-header-icon">
                      <div class="card-icon card-header-primary ">
                        <a-icon type="appstore" />
                      </div>
                     <a-statistic title="今日审批数据" :value="dataApproval"  />
                    </div>
                    <div class="card-footer">
                      <div class="stats">
                        今日审批数据
                      </div>
                    </div>
                  </div>
              </a-col>
          </a-row>
          <a-row :gutter="16">
              <a-col class="gutter-row" :span="8">
                    <div class="card card-stats">
                        <div class="m-card-header  card-header-icon">
                          <div class="card-icon card-header-warning ">
                            <a-icon type="radar-chart" />
                          </div>
                         <a-statistic title="应用配套数据" :value="applicationData" />
                        </div>
                        <div class="card-footer">
                          <div class="stats">
                            {{applicationDataNum}}条
                          </div>
                        </div>
                      </div>
              </a-col>
               <a-col class="gutter-row" :span="8">
                  <div class="card card-stats">
                    <div class="m-card-header  card-header-icon">
                      <div class="card-icon card-header-rose ">
                        <a-icon type="container" />
                      </div>
                     <a-statistic title="成果数据" :value="resultData" />
                    </div>
                    <div class="card-footer">
                      <div class="stats">
                        {{resultDataNum}}条
                      </div>
                    </div>
                  </div>
              </a-col>
              <a-col class="gutter-row" :span="8">
                  <div class="card card-stats">
                    <div class="m-card-header  card-header-icon">
                      <div class="card-icon card-header-black ">
                        <a-icon type="barcode" />
                      </div>
                     <a-statistic title="今日提交数据" :value="dataSubmit" />
                    </div>
                    <div class="card-footer">
                      <div class="stats">
                        今日提交数据
                      </div>
                    </div>
                  </div>
              </a-col>
          </a-row>


		</a-col>
<!--		<a-col class="gutter-row" :span="8">-->
<!--		    <a-card class="chart">-->
<!--            <sjrd-chart></sjrd-chart>-->
<!--         </a-card>-->
<!--		</a-col>-->
	</a-row>
    <a-row :gutter="16">
		<a-col class="gutter-row" :span="12">
		     <a-card>
		     <a-row :gutter="16">
		     <a-col class="gutter-row" :span="12">
		        <djsl-chart></djsl-chart>
		        </a-col>
		         <a-col class="gutter-row" :span="12">
		       <djfb-chart></djfb-chart>
		        </a-col>
		        </a-row>
		    </a-card>
		</a-col>
		<a-col class="gutter-row" :span="12">
 			<a-card title="数据分类周统计" class="card-table card-circle" style="margin-top:0;height:360px">
		         <a-row :gutter="16">
			        <a-col class="gutter-row" :span="8"  v-for="(item, index) of weekCount1" :key='index'>
			           <p class="circleTitle">{{item.name}}</p>
			           <div :class="setClass(index)" >{{item.value}}</div>
			        </a-col>
		        </a-row>
		         <a-row :gutter="16" style="margin-top:8px">
			        <a-col class="gutter-row" :span="8" v-for="(item, index) of weekCount2" :key='index'>
			           <p class="circleTitle">{{item.name}}</p>
			           <div :class="setClass(index+3)" >{{item.value}}</div>
			        </a-col>
		        </a-row>
		    </a-card>
		</a-col>
	</a-row>
  </div>
</template>

<script>
import axios from "axios"
import moment from 'moment';
import DJSLchart from './components/DJSLchart'
import DJFBchart from './components/DJFBchart'
import {GETSUBMITDATA,GETWEEKDATA,GETDATASIZE,GETDATAFILENUM} from '@/../static/js/apis.js'
 import global from "@/../static/global.vue"


export default {
  name: 'shortcutMenu',
  components:{
  	djslChart: DJSLchart,
  	djfbChart: DJFBchart,
  },
  data () {
  	return {
      totalData:'',
      productFile:'',
      applicationData:'',
      resultData:'',
      totalDataNum:'',
      productFileNum:'',
      applicationDataNum:'',
      resultDataNum:'',
      dataSubmit:'',
      dataApproval:'',
      weekCount1:'',
      weekCount2:''
  	}
  },
  methods: {
  	/*获取静态数据*/
      getStaticData() {
        let self = this
        GETDATASIZE({menuId:''}, function (res) {
          self.totalData=self.changeUnit(res.obj)
        })
        GETDATASIZE({menuId:1}, function (res) {
          self.productFile=self.changeUnit(res.obj)
        })
        GETDATASIZE({menuId:3}, function (res) {
          self.applicationData=self.changeUnit(res.obj)
        })
        GETDATASIZE({menuId:2}, function (res) {
          self.resultData=self.changeUnit(res.obj)
        })
        GETDATAFILENUM({menuId:''}, function (res) {
          self.totalDataNum=res.obj
        })
        GETDATAFILENUM({menuId:1}, function (res) {
          self.productFileNum=res.obj
        })
        GETDATAFILENUM({menuId:3}, function (res) {
          self.applicationDataNum=res.obj
        })
        GETDATAFILENUM({menuId:2}, function (res) {
          self.resultDataNum=res.obj
        })
        GETSUBMITDATA({status:''}, function (res) {
        	self.dataSubmit=res.obj
        })
         GETSUBMITDATA({status:'已审批'}, function (res) {
        	self.dataApproval=res.obj
        })
         GETWEEKDATA({menuIds:[11,12,13,149,35,21]}, function (res) {
        	self.weekCount1=res.obj.slice(0,3)
        	self.weekCount2=res.obj.slice(3,6)
        })
      },
      changeUnit(value){
          let result=''
          if(value<1024){
            result=value+'B'
          }else if((value>1024&&value<1024*1024)||value==1024){
            result=(value/1024).toFixed(2)+'KB'
          }else if((value>1024*1024&&value<1024*1024*1024)||value==1024*1024){
            result=(value/1024/1024).toFixed(2)+'MB'
          }else if((value>1024*1024*1024&&value<1024*1024*1024*1024)||value==1024*1024*1024){
            result=(value/1024/1024/1024).toFixed(2)+'GB'
          }else if((value>1024*1024*1024*1024&&value<1024*1024*1024*1024*1024)||value==1024*1024*1024*1024){
            result=(value/1024/1024/1024/1024).toFixed(2)+'TB'
          }
          return result
      },
      setClass(value){
         let obj={circleprogress:true}
         obj["color"+value]=true
         return obj
      },
  },
  created () {
    let self=this
    self.getStaticData()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*快捷菜单*/
.homeContent{
	width: 94%;
	margin: 20px 3%;
}
.card {
    border: 0;
    margin-bottom: 30px;
    margin-top: 30px;
    border-radius: 2px;
    color: #333;
    background: #fff;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    font-size: .875rem;
}
.card-stats .m-card-header{
    padding: .75rem 1.25rem;
}
.card-stats .m-card-header.card-header-icon{
	text-align: right;

}
.card  .card-icon{
    border-radius: 3px;
    padding: 12px;
    margin-top: -40px;
    margin-right: 35px;
    float: left;
    color: #fff
}
.card-header-success{
	background: linear-gradient(60deg,#66bb6a,#43a047);
	box-shadow:  0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(76,175,80,.4);
}
.card-header-info{
	background: linear-gradient(60deg,#26c6da,#00acc1);
	box-shadow:   0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(0,188,212,.4);
}
.card-header-primary{
  background: linear-gradient(60deg,#ab47bc,#8e24aa);
  box-shadow:   0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4);
}
.card-header-warning{
  background: linear-gradient(60deg,#ffa726,#fb8c00);
  box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(255,152,0,.4);
}
.card-header-rose{
  background: linear-gradient(60deg,#ec407a,#d81b60);
  box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(233,30,99,.4);
}
.card-header-black{
    background: linear-gradient(60deg, #263238, #212121);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(33, 33, 33,.4);
}
.card  .card-icon i{
    font-size: 42px;
    line-height: 56px;
    width: 56px;
    height: 56px;
    text-align: center;
}
/deep/.ant-statistic .ant-statistic-title{
	font-size: 18px!important
}
/deep/.ant-statistic .ant-statistic-content{
	font-size: 32px!important
}
.chart{
	 margin-top: 30px;
	height: 360px;
}
/deep/.card-circle .ant-card-body{
   padding:4px 24px!important
}
/deep/ table .ant-table-tbody > tr > td{
	padding: 12px 12px!important
}
.card-footer{
  text-align:right
}
.circleTitle{
	margin-top:6px;
  margin-bottom:6px;
	text-align:center
}
.circleprogress{
    width: 6.5rem;
    height: 6.5rem;
    line-height:5.5rem;
    border:10px solid #5470c6;
    border-radius: 50%;
    text-align:center;
    margin:0 auto;
    font-size:24px
}
.color1{
	border-color:#fac858
}
.color2{
	border-color:#9a60b4
}
.color3{
	border-color:#73c0de
}
.color4{
	border-color:#3ba272
}
.color5{
	border-color:#fc8452
}
</style>
